<!-- Created by shi.pengyan on 2017-01-03. -->
<template>
  <div>
    <el-form ref="form" :inline="true" :model="form" class="el-form-search">
      <el-form-item label="是否上架" style="padding-left:4px;">
        <el-radio-group v-model="form.isActive">
          <el-radio :label="true">是</el-radio>
          <el-radio :label="false">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-input v-model="form.productName" placeholder="产品名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="form.clientName" placeholder="客户姓名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="form.mobile" placeholder="联系方式"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryValueByKeyHandler">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style lang="scss">
  .el-form-search {
    padding-top: 5px;
  }
  .el-form-search .el-form-item {
    margin-bottom: 10px;
  }
  .el-form--inline .el-form-item__content {
    display: inline-block;
  }
</style>

<script type="text/babel">

  import { mapActions, mapGetters } from 'vuex'

  import moduleStore from './bll/appointmentsStore'
  import store from '../../store'
  (!store.state.sysAppointments) && store.registerModule('sysAppointments', moduleStore)

  export default{
    data() {
      return {
        form: {
          isActive: true,
          productName: null,
          clientName: null,
          mobile: null
        }
      }
    },
    computed: {
      ...mapGetters(['getPeAppointmentsPageSize'])
    },
    mounted() {
      this.initPage();
    },

    methods: {
      ...mapActions(['queryAppointments']),
      queryValueByKeyHandler() {
        this.queryAppointments({pageIndex: 1, pageSize: this.getPeAppointmentsPageSize, ...this.getPreForm()}).then(() => {
          this.$message.success('Succeed in querying cache.');
        });
      },
      initPage() {
      },
      getPreForm() {
        return {
          isActive: this.form.isActive,
          productName: (this.form.productName ? encodeURI(this.form.productName) : ''),
          clientName: (this.form.clientName ? encodeURI(this.form.clientName) : ''),
          mobile: (this.form.mobile ? encodeURI(this.form.mobile) : '')
        };
      }

    }
  }
</script>
